<template>
	<Loading v-if="countdown<=60&countdown>0"></Loading>

	<view class="container" v-else-if="countdown===0">
		<!-- 分类列表 -->
		<view class="category-list">
			<view v-for="(category, index) in categories" :key="index"
				:class="['category-item', activeCategory === category.id ? 'active' : '']"
				@click="selectCategory(index)">
				<view class="containers" v-if="category.id===activeCategory">
					<img :src="category.img" alt="Image" class="image" />
				</view>
				<p class="text">{{category.name}}</p>
			</view>
		</view>

		<!-- 商品列表 -->
		<scroll-view class="product-list" scroll-y @scroll="onScroll" :scroll-into-view="scrollTarget">
		<view v-for="(category, index) in categories" :key="index" :id="'category-' + category.id">
		    <view class="category-header">{{ category.name }}</view>
		    <view v-for="product in getProductsByCategory(category.id)" :key="product.id" class="product-item">
		        <view class="product-content">
		            <image :src="product.image" class="product-image"></image>
		            <view class="product-name">{{ product.name }}</view>
		        </view>
		    </view>
		</view>


		</scroll-view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted,
		computed,
		onUnmounted,
		toRaw
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		Loading
	} from '../Loading/Loading.vue'
	export default {
		components: {
			Loading
		},
		data() {
			return {
				countdown: 0,
				// 商品分类列表
				categories: [{
						id: 1,
						name: '电子产品',
						img: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{
						id: 2,
						name: '家居用品',
						img: 'https://doc.firstui.cn/img/img_logo.png'

					},
					{
						id: 3,
						name: '服饰',
						img: 'https://doc.firstui.cn/img/img_logo.png'
					},
				],
				// 商品列表
				products: [{

						name: '手机',
						categoryId: 1,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '电视',
						categoryId: 1,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '沙发',
						categoryId: 2,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '衬衫',
						categoryId: 3,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '衬衫',
						categoryId: 3,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '衬衫',
						categoryId: 3,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '衬衫',
						categoryId: 3,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
					{

						name: '衬衫',
						categoryId: 3,
						image: 'https://doc.firstui.cn/img/img_logo.png'
					},
				],
				// 当前高亮的分类，初始化为第一个分类的id
				activeCategory: 1, // categories[0].id 是 1
				// 定位到具体分类时的scroll-into-view属性
				scrollTarget: 'category-1', // 默认滚动到第一个分类
			};
		},
		onLoad() {
			this.countdown = 2;
			let interval = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(interval);
				}
			}, 1000);

		},
		methods: {
			// 根据分类获取商品
			getProductsByCategory(categoryId) {
				return this.products.filter((product) => product.categoryId === categoryId);
			},
			// 点击分类时，滚动到该分类的商品位置
			selectCategory(index) {
				const categoryId = this.categories[index].id;
				this.activeCategory = categoryId;
				this.scrollTarget = `category-${categoryId}`;
			},
			// 监听滚动事件，根据当前分类更新高亮状态
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				const categoryHeights = this.categories.map((category, index) => {
					return {
						id: category.id,
						top: index * this.getCategoryHeight(), // 每个分类的高度
					};
				});

				// 判断当前滚动位置处于哪个分类
				for (let i = 0; i < categoryHeights.length; i++) {
					const pos = categoryHeights[i];
					const nextPos = i < categoryHeights.length - 1 ? categoryHeights[i + 1] : {
						top: Infinity
					};

					if (scrollTop >= pos.top && scrollTop < nextPos.top) {
						this.activeCategory = pos.id;
						break;
					}
				}
			},
			// 获取每个分类的高度
			getCategoryHeight() {
				return 200; // 根据实际商品数量和高度来调整
			},
		},
	};
</script>

<style scoped>
	.containers {
		display: flex;
		flex-direction: column;
		/* 让图片和文字上下排列 */
		align-items: center;
		/* 水平居中对齐 */
		justify-content: center;
		/* 垂直居中对齐 */
		height: 100px;
		/* 容器的高度 */
	}

	.image {
		width: 100px;
		/* 图片宽度，可根据需求调整 */
	}

	.text {
		margin-top: 10px;
		/* 控制图片和文字之间的间距 */
	}

	.container {
		display: flex;
		flex-direction: row;
	}

	.category-list {
		width: 30%;
		border-right: 1px solid #ddd;
	}

	.category-item {
		padding: 10px;
		text-align: center;
		cursor: pointer;
	}

	.category-item.active {
		background-color: #007aff;
		color: white;
	}

	.product-list {
		width: 70%;
		height: 100vh;
		/* 设置滚动区域的高度 */
	}

	.category-header {
		font-size: 18px;
		font-weight: bold;
		padding: 10px;
		background-color: #f0f0f0;
	}

	.product-item {
		width: 100%;
		margin: 5px 0;
		padding: 10px;
		border: 1px solid #ddd;
		text-align: left;
		/* Align text to the left */
	}

	.product-content {
	
		/* Use flexbox to align items horizontally */
		align-items: center;
		/* Vertically center items */
	}

	.product-image {
		margin-right: 10px;
		/* Add some space between the image and the text */
		width: 100px;
		/* Set a fixed width for the image */
		height: 100px;
		/* Set a fixed height for the image */
	}

	.product-name {
		margin-top: 0;
		/* Remove top margin */
		font-size: 16px;
		/* Optional: adjust the font size */
	}
</style>